<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<u-navbar bgColor="#F5F9FC" :placeholder="true">
			<view slot="left" class="navbar-left">
				<navigator open-type="navigateBack" :delta="1" class="btn cancel-btn" @click.stop>
					<view class="back-content">
						<u-icon color="#1e88e5" name="arrow-left"></u-icon>
						<text class="navbar-title">新增公司</text>
					</view>
				</navigator>
			</view>
		</u-navbar>

		<!-- 主内容区 -->
		<view class="content-container">
			<view class="form-card">
				<form class="company-form" @submit.prevent="saveCompany">
					<input type="hidden" class="hidden-input" v-model="newCompany.id">

					<!-- 公司基本信息表单 -->
					<view class="form-section">
						<!-- 公司名称 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">公司名称</text>
									<text class="required-star">*</text>
								</view>
								<input type="text" class="text-input" placeholder="请输入公司全称"
									v-model="newCompany.companyName" required>
							</view>
						</view>

						<!-- 统一社会信用代码 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">统一社会信用代码</text>
									<text class="required-star">*</text>
								</view>
								<input type="text" class="text-input" placeholder="请输入18位统一社会信用代码"
									v-model="newCompany.creditCode" required>
							</view>
						</view>

						<!-- 法定代表人 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">法定代表人</text>
									<text class="required-star">*</text>
								</view>
								<input type="text" class="text-input" placeholder="请输入法定代表人姓名"
									v-model="newCompany.legalPerson" required>
							</view>
						</view>

						<!-- 法人联系电话 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">法人联系电话</text>
									<text class="required-star">*</text>
								</view>
								<input type="tel" class="text-input" placeholder="请输入法定代表人联系电话"
									v-model="newCompany.legalPhone" required>
							</view>
						</view>

						<!-- 所属行业 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">所属行业</text>
									<text class="required-star">*</text>
								</view>
								<picker class="picker-field" mode="selector" :range="industries" range-key="label"
									v-model="selectedIndustry" @change="onIndustryChange">
									<view class="picker-display">
										{{ selectedIndustry === -1 ? '请选择行业' : industries[selectedIndustry].label }}
									</view>
								</picker>
							</view>
						</view>

						<!-- 注册地址 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">注册地址</text>
									<text class="required-star">*</text>
								</view>
								<input type="text" class="text-input" placeholder="请输入公司注册地址"
									v-model="newCompany.registerAddress" required>
							</view>
						</view>

						<!-- 经营地址 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">经营地址</text>
								</view>
								<input type="text" class="text-input" placeholder="请输入公司实际经营地址"
									v-model="newCompany.businessAddress">
							</view>
						</view>

						<!-- 成立日期 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">成立日期</text>
									<text class="required-star">*</text>
								</view>
								<picker mode="date" class="date-picker" start="1970-01-01" :end="currentDate"
									:value="newCompany.establishDate" @change="onEstablishDateChange">
									<view class="picker-display">
										{{ newCompany.establishDate || '请选择日期' }}
									</view>
								</picker>
							</view>
						</view>

						<!-- 公司类型 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">公司类型</text>
									<text class="required-star">*</text>
								</view>
								<picker class="picker-field" mode="selector" :range="companyTypes" range-key="label"
									v-model="selectedCompanyType" @change="onCompanyTypeChange">
									<view class="picker-display">
										{{ selectedCompanyType === -1 ? '请选择公司类型' : companyTypes[selectedCompanyType].label }}
									</view>
								</picker>
							</view>
						</view>

						<!-- 联系电话 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">公司联系电话</text>
									<text class="required-star">*</text>
								</view>
								<input type="tel" class="text-input" placeholder="请输入公司联系电话"
									v-model="newCompany.companyPhone" required>
							</view>
						</view>

						<!-- 联系人 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">日常联系人</text>
								</view>
								<input type="text" class="text-input" placeholder="请输入日常联系人姓名"
									v-model="newCompany.contactPerson">
							</view>
						</view>

						<!-- 备注信息 -->
						<view class="form-row">
							<view class="form-field textarea-field-wrapper">
								<view class="label-wrapper">
									<text class="field-label">备注</text>
								</view>
								<textarea class="textarea-field" placeholder="请输入公司备注信息" v-model="newCompany.remark"
									rows="3"></textarea>
							</view>
						</view>
					</view>
				</form>
			</view>
		</view>

		<!-- 底部固定按钮区域 -->
		<view class="fixed-bottom-buttons">
			<navigator open-type="navigateBack" :delta="1" class="btn cancel-btn" @click.stop>
				取消
			</navigator>
			<button class="btn save-btn" @click="saveCompany">
				保存
			</button>
		</view>
	</view>
</template>

<script>
	import {
		addcustomCompany
	} from "@/api/auth.js"
	export default {
		data() {
			return {
				newCompany: {
					id: '',
					companyName: '',
					creditCode: '',
					legalPerson: '',
					legalPhone: '',
					industry: '',
					registerAddress: '',
					businessAddress: '',
					establishDate: '',
					companyType: '',
					companyPhone: '',
					contactPerson: '',
					remark: ''
				},
				// 行业列表
				industries: [{
						value: 'IT',
						label: '信息技术'
					},
					{
						value: 'finance',
						label: '金融'
					},
					{
						value: 'education',
						label: '教育'
					},
					{
						value: 'medical',
						label: '医疗'
					},
					{
						value: 'retail',
						label: '零售'
					},
					{
						value: 'manufacturing',
						label: '制造业'
					},
					{
						value: 'service',
						label: '服务业'
					},
					{
						value: 'other',
						label: '其他'
					}
				],
				selectedIndustry: -1,
				// 公司类型列表
				companyTypes: [{
						value: 'limited',
						label: '有限责任公司'
					},
					{
						value: 'partnership',
						label: '合伙企业'
					},
					{
						value: 'individual',
						label: '个体工商户'
					},
					{
						value: 'state-owned',
						label: '国有企业'
					},
					{
						value: 'joint-stock',
						label: '股份有限公司'
					},
					{
						value: 'other',
						label: '其他类型'
					}
				],
				selectedCompanyType: -1,
				currentDate: this.formatDate(new Date())
			};
		},
		onLoad() {
			console.log('新增公司页面加载完成');
		},
		methods: {
			// 格式化日期
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},

			// 行业选择变化
			onIndustryChange(e) {
				this.selectedIndustry = e.detail.value;
				this.newCompany.industry = this.industries[this.selectedIndustry].value;
			},

			// 公司类型选择变化
			onCompanyTypeChange(e) {
				this.selectedCompanyType = e.detail.value;
				this.newCompany.companyType = this.companyTypes[this.selectedCompanyType].value;
			},

			// 成立日期选择变化
			onEstablishDateChange(e) {
				this.newCompany.establishDate = e.detail.value;
			},

			// 保存公司信息
			async saveCompany() {
				// 表单验证
				if (!this.newCompany.companyName || !this.newCompany.creditCode ||
					!this.newCompany.legalPerson || !this.newCompany.legalPhone ||
					!this.newCompany.registerAddress || !this.newCompany.establishDate ||
					!this.newCompany.companyPhone || this.selectedIndustry === -1 ||
					this.selectedCompanyType === -1) {
					uni.showToast({
						title: '请填写所有必填字段',
						icon: 'none'
					});
					return;
				}

				// 统一社会信用代码格式验证(简单验证18位)
				if (this.newCompany.creditCode.length !== 18) {
					uni.showToast({
						title: '请输入18位统一社会信用代码',
						icon: 'none'
					});
					return;
				}

				try {
					// 显示加载状态
					uni.showLoading({
						title: '保存中...',
						mask: true
					});

					// 调用API接口 - 这里是正确的写法
					const res = await addcustomCompany(this.newCompany);

					// 关闭加载状态
					uni.hideLoading();

					// 检查响应结果
					if (res.code === 200) {
						if (res.data) {
							// 如果有返回数据，可以在这里处理
							console.log('返回数据:', res.data);
						}

						// 显示成功提示并返回列表页
						uni.showToast({
							title: '公司添加成功',
							icon: 'success'
						});

						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						// 显示错误信息
						uni.showToast({
							title: res.message || '保存失败',
							icon: 'none'
						});
					}
				} catch (error) {
					// 关闭加载状态
					uni.hideLoading();

					// 处理网络错误或其他异常
					console.error('保存公司信息失败:', error);
					uni.showToast({
						title: '网络异常，请稍后重试',
						icon: 'none'
					});
				}
			}
		}
	};
</script>

<style>
	/* 复用员工页面基础样式，保持风格统一 */
	.page-container {
		min-height: 100vh;
		background-color: #f9fafb;
		position: relative;
	}

	.navbar-left {
		display: flex;
		align-items: center;
	}

	.back-navigator {
		display: flex;
		align-items: center;
	}

	.back-content {
		display: flex;
		align-items: center;
	}

	.navbar-title {
		font-size: 16px;
		font-weight: 600;
		color: #1e88e5;
		margin-left: 8px;
	}

	.content-container {
		margin: 0 auto;
		padding: 16px;
		padding-bottom: 80px;
		box-sizing: border-box;
	}

	.form-card {
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		padding: 16px;
	}

	.company-form {
		width: 100%;
	}

	.hidden-input {
		display: none;
	}

	.form-section {
		margin-bottom: 24px;
	}

	.form-row {
		margin-bottom: 14px;
		padding: 4px 0;
	}

	.form-field {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
	}

	.label-wrapper {
		width: 140px;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		padding-right: 12px;
		box-sizing: border-box;
	}

	.field-label {
		font-size: 14px;
		color: #6b7280;
	}

	.required-star {
		color: #f44336;
		margin-left: 4px;
	}

	.text-input {
		flex-grow: 1;
		height: 40px;
		padding: 0 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
		color: #1f2937;
		z-index: 0;
		box-sizing: border-box;
	}

	.text-input::placeholder {
		color: #9ca3af;
		opacity: 1;
	}

	.picker-field {
		flex-grow: 1;
	}

	.picker-display {
		width: 100%;
		height: 40px;
		line-height: 40px;
		padding: 0 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
		color: #1f2937;
		box-sizing: border-box;
	}

	.date-picker {
		flex-grow: 1;
	}

	.textarea-field-wrapper {
		align-items: flex-start;
		padding-top: 8px;
	}

	.textarea-field {
		flex-grow: 1;
		min-height: 80px;
		padding: 8px 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
		color: #1f2937;
		resize: vertical;
		box-sizing: border-box;
	}

	.fixed-bottom-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		padding: 12px 16px;
		box-sizing: border-box;
		display: flex;
		gap: 12px;
		max-width: 750rpx;
		margin: 0 auto;
	}

	.btn {
		flex: 1;
		height: 44px;
		line-height: 44px;
		text-align: center;
		border-radius: 8px;
		font-size: 15px;
		font-weight: 500;
		transition: all 0.2s ease;
	}

	.cancel-btn {
		background-color: #f3f4f6;
		color: #4b5563;
		text-decoration: none;
	}

	.cancel-btn:active {
		background-color: #e5e7eb;
	}

	.save-btn {
		background-color: #1e88e5;
		z-index: 99;
		color: #ffffff;
		border: none;
	}

	.save-btn:active {
		background-color: #1976d2;
	}
</style>